<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <slot @click="aa"></slot>
    </div>
  </div>
</template>
<script>
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
import { mapState } from 'vuex'
export default {
  mounted () {
    const cinemaId = this.$route.params.cinemaId
    const filmList = this.cinemaFilmList
    const that = this
    const mySwiper = new Swiper('.swiper', {
      slidesPerView: 4,
      centeredSlides: true,
      slideToClickedSlide: true,
      on: {
        slideChangeTransitionEnd: function () {
          // alert(this.activeIndex)// 切换结束时，告诉我现在是第几个slide
          sessionStorage.imgIndex = this.activeIndex
          that.$router.push(`/cinema/${cinemaId}/film/${filmList[this.activeIndex].filmId}`)
        }
      }
    })
    if (sessionStorage.imgIndex) {
      mySwiper.slideTo(sessionStorage.imgIndex)
    } else {
      sessionStorage.imgIndex = 0
    }
  },
  computed: {
    ...mapState(['cinemaFilmList'])
  }
}
</script>
